<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="./css/style.min.css">
    <style>
        .wechat_submit_btn {
            outline: none;
            width: 25px;
            height: 25px;
            background: url('./images/wechat-icon.png') 0 0 no-repeat;
            background-size: contain;
            border:none;
        }
    </style>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="login-pg">
        <header class="cl" v-show="header.show">
            <div class="nav-bar cl">
                <span class="goback arrow_l" @click="goback"></span>
                <span class="page-name" v-cloak>登录{{shop_name}}会员店</span>
            </div>
        </header>
        <div class="logo" v-cloak><img :src="shop_logo"></div>
        <h1 class="pg-title" v-cloak>欢迎登录{{shop_name}}会员店</h1>
        <div class="login-wrap" v-cloak>
            <form novalidate>
                <div class="row">
                    <label class="lbl-col">手机号：</label>
                    <div class="form-col">
                        <input type="text" id="username" v-model="username" maxlength="11" placeholder="请输入手机号" @blur="validate">
                    </div>
                </div>
                <div class="row">
                    <label class="lbl-col">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                    <div class="form-col">
                        <input type="text" id="password" v-model="password" placeholder="请输入密码" @blur="validate" v-if="eyes_flag">
                        <input type="password" id="password" v-model="password" minlength="6" maxlength="18" placeholder="请输入密码" @blur="validate" v-else>
                        <span class="eyes"><input type="checkbox" v-model=chk  id="check"><i @click="chk" :class="{eyes_c:eyes_flag}"></i></span>
                    </div>
                </div>
                <p class="btn-wrap">
                    <button type="submit" @click.prevent="loginfn">登录</button>
                </p>
                <p><a :href="registerlink" class="reg-link txt-hint">手机注册</a><a :href="forgotlink" class="forget-link txt-hint">忘记密码</a></p>
                <div class="errors" v-show="err" v-cloak>
                    <p v-if="usr_err">{{usr_error_msg}}</p>
                    <p v-if="pwd_err">{{pwd_error_msg}}</p>
                </div>
            </form>
        </div>

        
        <toast ref="toast"></toast>
<!--         <form :action="frm_action" v-cloak>
            <input type="hidden" name='storeid' v-model="storeid">
            <input type="hidden" name='FailReUrl' v-model='FailReUrl'>
            <input type="hidden" name='SuccUrl' v-model='SuccUrl'>
            <button type="submit" class="wechat_submit_btn"></button>
        </form> -->
        <div class="trd-login" v-cloak>
            <p class="title">第三方登录</p>
        <p class="ico-wrap">
        <span class="wechat" v-if="!header.show" ><img src="./images/wechat-icon2.png" @click="wxlogin" ></span>
        <span class="qq" @click="qqlogin"><img src="./images/qq2.png"></span></p>
        </div>
        
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script type="text/javascript" src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>
    <script>
    function getQuery(str,name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        _str=decodeURIComponent(str)
        var r = _str.substr(1).match(reg);
        if (r != null) return r[2];
        return null;
    };
    var toast = new component.popup.toast();
    var store_id = APP.getQueryString("storeid");
    var redirectUrl=APP.getQueryString("redirectUrl");
    var _ReLogin=APP.getQueryString("ReLogin");
    var _host=window.location.host;
    var cookieUserName = APP.getCookie("usrname");
    var goodsid=getQuery(redirectUrl,'id');
    if (redirectUrl) {
        APP.setCookie('c_url',redirectUrl)
    }else{
        APP.setCookie('c_url',"")
    }
    if (store_id==""||store_id==null) {
        store_id=APP.getCookie("shopid");
        if (store_id==""||store_id==null) {
            store_id="";
        }
    }
    Vue.http.options.emulateJSON = true;
    Vue.http.options.xhr = {
                withCredentials: true
            }
    Vue.http.options.credentials = true;
    var login = new Vue({
        el: "#login-pg",
        data: {
			header:{
				show: !APP.iswechat()
			},
            chkdata: "",
            eyes_flag: false,
            type: "password",
            err_state: false,
            username: cookieUserName,
            usr_err: false,
            usr_error_msg: "",
            password: "",
            pwd_error_msg: "",
            pwd_err: false,
            registerlink: "register.html?storeid=" + store_id,
            forgotlink: "forget.html?storeid=" + store_id,
            shop_name: '',
            shop_logo: '',
            storeid:store_id,
            frm_action:PHPHOST + 'api/member/electronic-wx/check-code',
            FailReUrl:'http://'+_host+'/register.html',
            SuccUrl:redirectUrl||'http://'+_host+'/home.html',
            qqErrUrl:'http://'+_host+'/register.html',
            qqRegUrl:'http://'+_host+'/qqlogin-chn.html',
            wxRegUrl:'http://'+_host+'/wxlogin-chn.html',
            qqHomeUrl:redirectUrl||'http://'+_host+'/home.html'
        },

        mounted: function() {
           APP.init(this,false,function (arg){
			   this.shop_logo = arg.body.data.shop.shop_logo||'./images/logo-default.png';
			   this.shop_name = arg.body.data.shop.shop_name;
		   }.bind(this));
           if (_ReLogin) {
            setTimeout(function(){
                login.$refs.toast.show("您已绑定手机号："+_ReLogin,5000);
            },1000)
            
           }
        },
        component: {
            'toast': toast
        },
        methods: {
            goback: function() {
                window.history.go(-1);
            },
            loginfn: function() {
                var usrname = this.username;
                var passwd = this.password;
                var err, err_msg;
                APP.setCookie('usrname',usrname);
                if (this.username == "" || this.password == "") {
                    this.$refs.toast.show("手机号密码不能为空！");
                    return false;
                }                
                Vue.http.post(APIPHP + 'index.php?r=home/index/login&storeid='+store_id, {
                    mobile: usrname,
                    password: passwd,
                    storeid: store_id,
                    act: "1"
                }).then(function(_res) {
                    if (_res.body.flag == 1) {
                        APP.setCookie('memberid',_res.body.info.user_id);
                            if (redirectUrl) {
                                window.location.href=decodeURIComponent(redirectUrl);
                            }else{
                                window.location.href = "home.html?storeid=" + store_id; 
                            }
                    } else {
                        login.$refs.toast.show(_res.body.msg);
                    }
                }, function(_res) {
                    this.$refs.toast.show("连接错误，请稍候重试！");
                });

            },
            chk: function() {
                this.eyes_flag = !this.eyes_flag;
                if (this.eyes_flag) {
                    this.type = "text"
                } else {
                    this.type = "password"
                }
            },
            validate: function(e) {
                if (e.target.id == "username") {
                    var regex = /^1\d{10}$/;
                    if (this.username == "") {
                        this.$refs.toast.show("手机号不能为空！");
                    } else if (!regex.test(this.username)) {
                        this.$refs.toast.show("手机号为11位纯数字！");
                    } else {
                        this.err_state = false;
                        this.usr_err = false;
                    }
                } else if (e.target.id == "password") {
                    var regex = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,18}$/;
                    if (this.password == "") {
                        this.$refs.toast.show("密码不能为空！");
                    } else if (!regex.test(this.password)) {
                        this.$refs.toast.show("密码仅包含英文大小写及特殊字符，限6-18位！");
                    } 
                }
            },
            wechat_login: function () { 
                var that=this;
                var _host=window.location.host;
                var _url='&FailReUrl='+'http://'+_host+'/register.html&SuccUrl='+'http://'+_host+'/home.html';
                Vue.http.get(PHPHOST + 'api/member/electronic-wx/check-code?storeid='+store_id+_url, {
                },{emulateJSON : true }).then(function(_res) {
                }, function(_res) {
                    // that.$refs.toast.show("连接错误，请稍候重试！");
                });
                
            },
            qqlogin:function () {
                var _url=PHPHOST+"apic/web/index.php?r=home/index/qq&storeid="+store_id+'&error_url='+encodeURIComponent(this.qqErrUrl)+'&register_url='+encodeURIComponent(this.qqRegUrl)+'&jdhui_url='+this.qqHomeUrl
                console.log(_url)
                    window.location.href=_url;
            },
            wxlogin:function () {
                var _url=PHPHOST+"apic/web/?r=home/index/wx&storeid="+store_id+'&error_url='+encodeURIComponent(this.qqErrUrl)+'&register_url='+encodeURIComponent(this.wxRegUrl)+'&jdhui_url='+this.qqHomeUrl
                    window.location.href=_url;
            }
        },
        computed: {
            err: function() {
                if (this.usr_err == true || this.pwd_err == true) {
                    return true;
                };
                if (this.usr_err == false && this.pwd_err == false) {
                    return false;
                }
            }
        }
    })
    </script>
</body>

</html>
